<template>

  <div  style="width:100%;">




    <!-- 左 start -->
    <div style="width:50%;float:left;">

      <el-button  @click="opens()" type="primary" style="margin-left: 16px;">
        点我打开
      </el-button>





      <!-- 弹框start -->
      <el-drawer
        size="42%"
        title="患者基本信息"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <div>
          <!-- 弹框左div start -->
          <div style="width:50%;float:left;">
            <el-row :gutter="15">
              <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="76px">
                <el-col :span="6">
                  <el-form-item label="卡号" prop="cardId">
                    <el-input v-model="formData.cardId" placeholder="请输入卡号" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="">
                    <el-button @click="cardIdsearch()" type="primary" icon="el-icon-search" size="medium">
                    </el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="13">
                  <el-row gutter="15">
                    <el-col :span="12">
                      <el-form-item label="婚姻" prop=" maritalStatus">
                        <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻" clearable
                                   :style="{width: '100%'}">
                          <el-option v-for="(item, index) in  maritalStatusOptions" :key="index" :label="item.label"
                                     :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="职业" prop="career">
                        <el-input v-model="formData.career" placeholder="请输入职业" clearable :style="{width: '100%'}">
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="17">
                  <el-row gutter="15">
                    <el-col :span="8">
                      <el-form-item label="既往史" prop="pastHistory">
                        <el-input v-model="formData.pastHistory" type="textarea" placeholder="请输入既往史"
                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="个人史" prop="personalHistory">
                        <el-input v-model="formData.personalHistory" type="textarea" placeholder="请输入个人史"
                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="家族史" prop="familyHistory">
                        <el-input v-model="formData.familyHistory" type="textarea" placeholder="请输入家族史"
                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-row gutter="15">
                    <el-col :span="17">
                      <el-form-item label="">
                        <el-button @click="submitInfo()" type="primary" size="medium"> 提交修改 </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>

              </el-form>
            </el-row>
          </div>
          <!-- 弹框左div end -->

          <!-- 弹框右div start -->
          <div  style="width:50%;float:left;">

            <el-table
              :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >
              <el-table-column
                prop="name"
                label="姓名"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="cardId"
                label="就诊卡号">
              </el-table-column>
              <el-table-column
               
                label="状态">

                <template scope="scope">

        <span v-if="scope.row.queueStatus=='1'"  class="el-tag el-tag--medium el-tag--light" index="0"> 排队中 </span>
         
     
    </template>


              </el-table-column>
            </el-table>

          </div>
          <!-- 弹框右div end -->



        </div>
      </el-drawer>
      <!-- 弹框end -->



      <!-- 门诊处方笺start  -->
      <div  style="width:80%" >
        <el-descriptions class="margin-top" title="门诊处方笺" :column="3" :size="size" border>
         
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              处方号
            </template>
            {{patient.cfh}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              科室
            </template>
            {{patient.code}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              日期
            </template>
            {{patient.createDatetime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              姓名
            </template>
            <el-tag size="small">{{patient.name}}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              性别
            </template>
            <el-tag size="small">{{patient.sex}}</el-tag>
          </el-descriptions-item>


          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              民族
            </template>
            <el-tag size="small">{{patient.nationality}}</el-tag>
          </el-descriptions-item>

           <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              年龄
            </template>
            <el-tag size="small">{{patient.birthday}}</el-tag>
          </el-descriptions-item>



          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              初步诊断
            </template>
            <el-input v-model="diagnosisResult"   placeholder="请输入初步诊断"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 门诊处方笺end  -->

      <!-- RP start -->
      <div style="color:red"   id="drugs" >
      <ol v-html="n.content">
       
      </ol>
      
      </div>
      <!-- RP end -->


    </div>
    <!-- 左 end -->

    <!-- 右 start -->
    <div  style="width:50%;float:left;">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData1" :rules="rules" size="medium" label-width="97px">
          <el-col :span="6">
            <el-form-item label="体温" prop="bodyTemperature">
              <el-input v-model="formData1.bodyTemperature" placeholder="请输入体温" clearable
                        :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="脉搏" prop="pulse">
              <el-input v-model="formData1.pulse" placeholder="请输入脉搏" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="心率" prop="heartRate">
              <el-input v-model="formData1.heartRate" placeholder="请输入心率" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="血压" prop="bloodPressure">
              <el-input v-model="formData1.bloodPressure" placeholder="请输入血压" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-row type="flex" justify="center" align="top">
              <el-col :span="8">
                <el-form-item label="" prop="sh">
                  <el-button type="primary" icon="el-icon-refresh-left" size="medium"> 稍后处理 </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-form-item label="药品" prop="name">
              <el-select @change="selectyp(formData1.name)" v-model="formData1.name" placeholder="请选择药品" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in nameOptions" :key="index" :label="item.name"
                           :value="item.name" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="药品规格" prop="specification">
              <el-input v-model="formData1.specification" clearable :style="{width: '100%'}" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-row>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用法" prop="yf">
              <el-input v-model="formData1.yf"  :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="yf1">
              <el-select v-model="formData1.yf1"  :style="{width: '100%'}">
                <el-option v-for="(item, index) in yfOptions1" :key="index" :label="item.label"
                           :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="yf2">
              <el-select v-model="formData1.yf2"  :style="{width: '100%'}">
                <el-option v-for="(item, index) in yfOptions2" :key="index" :label="item.label"
                           :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-row type="flex" justify="center" align="top">
              <el-col :span="8">
                <el-form-item label="" prop="field128">
                  <el-button type="primary" icon="el-icon-delete-solid" size="medium" @click="delyp()"> 清 </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="" prop="field129">
                  <el-button @click="addYp()" type="primary" icon="el-icon-circle-plus" size="medium"> 添 </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="19">
            <el-row type="flex" justify="start" align="middle">
              <el-col :span="8">
                <el-form-item label="添加医嘱" prop="medicalOrder">
                  <el-input v-model="formData1.medicalOrder" type="textarea" placeholder="请输入添加医嘱"
                            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="" prop="mzwc">
                  <el-button @click="mzOk()" type="primary" icon="el-icon-search" size="small"> 门诊完成 </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

        </el-form>
      </el-row>

    </div>
    <!-- 右 end -->






  </div>
</template>
<script>

import { listMz,getPatientInfo,updateInfo,listYp,updateQueueStatus } from "@/api/his/mz";
import { mzOK } from "@/api/his/record";
  export default {
    components: {},
    props: [],
    inject:['reload'],
    data() {
      return {

        conditionDescription:undefined,//主诉
        diagnosisResult:undefined,//初步诊断
        nameOptions: [],
        patient:{
          cfh:undefined,
          cardId:'',
          career:'',
          name:'',
          sex:'',
          nationality:'',
          createDatetime:'',
          birthday:'',
          address:'',
          id:undefined,
          idCard:'',
          maritalStatus:'',
          pastHistory:'',
          personalHistory:'',
          telphone:'',
          code:'',
          registerId:'',


        },
        size: '',
        n:{
          content:''
        },
        drawer: false,
        direction: 'btt',
        formData: {
          cardId: undefined,
          maritalStatus: undefined,
          career: undefined,
          pastHistory: undefined,
          personalHistory: undefined,
          familyHistory: undefined
        },
        formData1: {
          bodyTemperature: undefined,
          pulse: undefined,
          heartRate: undefined,
          bloodPressure: undefined,
          sh: undefined,
          name: undefined,
          specification: undefined,
          yf: undefined,
          yf1: undefined,
          yf2: undefined,
          field128: undefined,
          field129: undefined,
          medicalOrder: undefined,
          mzwc: undefined
        },
        rules: {
          cardId: [{
            required: true,
            message: '请输入卡号',
            trigger: 'blur'
          }],
          maritalStatus: [{
            required: true,
            message: '请选择婚姻',
            trigger: 'change'
          }],
          career: [{
            required: true,
            message: '请输入职业',
            trigger: 'blur'
          }],
          pastHistory: [{
            required: true,
            message: '请输入既往史',
            trigger: 'blur'
          }],
          personalHistory: [{
            required: true,
            message: '请输入个人史',
            trigger: 'blur'
          }],
          familyHistory: [{
            required: true,
            message: '请输入家族史',
            trigger: 'blur'
          }],
        },
        maritalStatusOptions: [{
          "label": "已婚",
          "value": "已婚"
        }, {
          "label": "未婚",
          "value": "未婚"
        }],
        yfOptions1: [{
          "label": "口服",
          "value": "口服"
        }, {
          "label": "外用",
          "value": "外用"
        }],
        yfOptions2: [{
          "label": "每日一次",
          "value": "每日一次"
        }, {
          "label": "每日两次",
          "value": "每日两次"
        }, {
          "label": "每日三次",
          "value": "每日三次"
        }],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getListMz(); //获取当前医生的病人队列
      this.getypList();//获取所有药品
    },
    mounted() {},
    methods: {

      opens(){

         this.getListMz(); //获取当前医生的病人队列
      this.getypList();//获取所有药品





        this.drawer = true
      },



      mzOk(){//门诊完成


      var cfh =this.patient.cfh;

      var id = this.patient.id;


      if(id==undefined){

        return

      }

      if(cfh==undefined){

        return
      }

      var diagnosisResult = this.diagnosisResult;
      if(diagnosisResult==undefined){
        this.$message({
          message: '请填写初步诊断',
          type: 'warning'
        });


        return
      }

      var name = this.formData1.name;
      var yf1 = this.formData1.yf1;
      var yf2 =  this.formData1.yf2;
       var specification =  this.formData1.specification;
      if(name==undefined){
        this.$message({
          message: '请选择药品',
          type: 'warning'
        });
        return;
      }
       if(yf1==undefined||yf2==undefined){
        this.$message({
          message: '请选择服用方式',
          type: 'warning'
        });
        return;
      }



      var medicalOrder = this.formData1.medicalOrder;

      if(medicalOrder==undefined){
        this.$message({
          message: '请填写医嘱',
          type: 'warning'
        });
        return;

      }



      var data = {
        registerId:this.patient.registerId,
        prescriptionNum:this.patient.cfh,
        prescription:this.n.content,
        medicalOrder:this.formData1.medicalOrder,
        drugCost:111,
        diagnosisResult:this.diagnosisResult,
        conditionDescription:''
        
      }



      mzOK(data).then(response => {

        if(response.code==200){

           this.$message({
          message: '门诊结束',
          type: 'success'
        });

        var parm = {

          id:this.patient.id,
          status:0

        }

        updateQueueStatus(parm).then(response =>{

        })

        this.reload()






        }


           
        
        });














      







      },
      delyp(){
             this.n.content='';
            this.formData1.name=undefined;
             this.formData1.yf=undefined;
            this.formData1.yf1=undefined;
            this.formData1.yf2=undefined;
            this.formData1.specification=undefined;
      },
      addYp(){
        var name = this.formData1.name;
      var yf1 = this.formData1.yf1;
      var yf2 =  this.formData1.yf2;
       var specification =  this.formData1.specification;
      if(name==undefined){
        this.$message({
          message: '请选择药品',
          type: 'warning'
        });
        return;
      }
       if(yf1==undefined||yf2==undefined){
        this.$message({
          message: '请选择服用方式',
          type: 'warning'
        });
        return;
      }
     

     this.n.content+=
     '<li>' + name + '<span style="margin-left:100px">'
        + specification + '</span></li><div style="margin: 10px 0 10px 5px;">用法：<sapn>'
        + yf1 + '</sapn><sapn  style="margin-left:40px">' + yf2
        + '</sapn></div>';

        // <sapn  style="margin-left:60px">' + drugNum + '</sapn>





      },
          selectyp(name){//药品下拉框
              console.log(name);
              console.log(this.nameOptions);

              
            
             this.nameOptions.forEach(item =>{

           if(item.name.indexOf(name) != -1){

             this.formData1.specification=item.specifications;
             
           }
         })
       
              
          },

        getypList(){//获取所有药品

          listYp().then(response => {


            debugger


            this.nameOptions=response.rows;
          

        

       


      



      

        });



        },


      //提交修改信息
      submitInfo(){

      
      updateInfo(this.formData).then(response => {
          
        console.log(response);


        this.drawer=false;



      

        });





      },

      //根据就诊卡号查询基本信息
      cardIdsearch(){

        var cardId = this.formData.cardId;

        getPatientInfo(cardId).then(response => {


          if(null==response.data){


        this.$message({
          message: '没有挂号信息',
          type: 'warning'
        });
        return;




          }


      



          this.formData.cardId=response.data.cardId;
          this.formData.maritalStatus=response.data.maritalStatus;
          this.formData.career=response.data.career;
          this.formData.pastHistory=response.data.pastHistory;
          this.formData.personalHistory=response.data.personalHistory;
          this.formData.familyHistory=response.data.familyHistory;




          
          this.patient.cardId=response.data.cardId;
          this.patient.career=response.data.career;
          this.patient.name=response.data.name;
          this.patient.sex=response.data.sex;
          this.patient.nationality=response.data.nationality;
          this.patient.createDatetime=response.data.createDatetime;
          this.patient.birthday=response.data.birthday;
          this.patient.address=response.data.address;
          this.patient.id=response.data.id;
          this.patient.idCard=response.idCard;
          this.patient.maritalStatus=response.data.maritalStatus;
          this.patient.pastHistory=response.data.pastHistory;
          this.patient.personalHistory=response.data.personalHistory;
          this.patient.telphone=response.data.telphone;
          this.patient.code=response.data.ksName;
          this.patient.registerId=response.data.registerId;



        var cfh = 'CFH_'+Date.now();

        this.patient.cfh = cfh;

        





        




    

      
       
        });

        




      },
      //获取当前医生的病人队列
      getListMz(){

        listMz().then(response => {
          
         this.tableData=response.rows;

        });

      },
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      formatter(row, column) {
        return row.address;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }

</script>


<style>
</style>
